<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>event handlers</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>

  <x-test>
    <div>...light...</div>
  </x-test>

  <polymer-element name="x-test" on-tap="{{hostTapAction}}">
    <template>
      <style>
        :host {
          display: block;
        }
        .gradient {
          background: -webkit-gradient(linear, left top, left bottom,
            color-stop(0%,#b4e391), color-stop(50%,#61c419),
            color-stop(100%,#b4e391));
        }
      </style>

      <div id="div" on-tap="{{divTapAction}}">Tap me!
        <content></content>
      </div>
      <input id="input" on-focus="{{focusAction}}" on-blur="{{blurAction}}">focusy</input>
      <div id="list" style="height: 200px; overflow: auto; border: 1px solid black;" on-scroll="{{scrollAction}}">
        <div class="gradient">
          <template repeat="{{list1}}">
            <div class="list1" on-up="{{itemUpAction}}">{{index}}</div>
          </template>
          <template repeat="{{item in list2}}">
            <div class="list2" on-tap="{{itemTapAction}}">{{item.index}}</div>
          </template>
        </div>
      </div>
    </template>
    <script>
      Polymer('x-test', {
        tests: 0,
        ready: function() {
          this.list1 = [];
          this.list2 = [];
          for (var i=0, o; i <10; i++) {
            o = {index: i};
            this.list1.push(o);
          }
          for (var i=0, o; i <10; i++) {
            o = {index: i, itemTapAction: function(e) {
              this.itemTapAction(e);
            }};
            this.list2.push(o);
          }
          this.runTests();
        },
        hostTapAction: function(e) {
          e.gotHostEvent = true;
        },
        divTapAction: function(e) {
          this.logEvent(e);
        },
        focusAction: function(e) {
          this.logEvent(e);
        },
        blurAction: function(e) {
          this.logEvent(e);
        },
        scrollAction: function(e) {
          this.logEvent(e);
        },
        logEvent: function(e, message) {
          e.gotEvent = true;
          //console.log('[%s].%s: %s', e.currentTarget.localName, e.type, message || '');
        },
        itemTapAction: function(e) {
          var model = e.target.templateInstance.model;
          this.logEvent(e, 'item: ' + (model.item ? model.item.index : model.index));
          e.stopPropagation();
        },
        itemUpAction: function(e) {
          this.logEvent(e);
        },
        runTests: function() {
          var e = this.fire('tap', null, this.$.div, true);
          chai.assert.isTrue(e.gotEvent, 'tap event heard at div host');
          chai.assert.isTrue(e.gotHostEvent, 'tap event heard at host');
          e = this.fire('focus', null, this.$.input, false);
          chai.assert.isTrue(e.gotEvent, 'focus event heard by input');
          e = this.fire('blur', null, this.$.input, false);
          chai.assert.isTrue(e.gotEvent, 'blur event heard by input');
          e = this.fire('scroll', null, this.$.list, false);
          chai.assert.isTrue(e.gotEvent, 'scroll event heard by list');
          this.onMutation(this.$.list, function() {
            var l1 = this.$.list.querySelector('.list1');
            var e = this.fire('up', null, l1, false);
            var l2 = this.$.list.querySelector('.list2');
            e = this.fire('tap', null, l2, false);
            chai.assert.isTrue(e.gotEvent, 'tap event heard by list2 item');
            done();
          });
        }
      });
    </script>
  </polymer-element>
  </body>
</html>
